<template>
  <div class="dynamic-inputs-container">
    <h2 class="title">动态添加el-input输入框</h2>
    
    <div class="input-count">
      当前输入框数量: {{ inputCount }}
    </div>
    
    <div class="action-buttons">
      <el-button type="primary" :icon="Plus" @click="addInput">添加输入框</el-button>
      <el-button type="success" :icon="View" @click="showAllValues">显示所有值</el-button>
      <el-button type="danger" :icon="Delete" @click="clearAllInputs">清空所有</el-button>
    </div>
    
    <div v-if="inputs.length === 0" class="empty-state">
      <el-empty description="暂无输入框，点击上方按钮添加" />
    </div>
    
    <div v-else class="inputs-list">
      <div v-for="(input, index) in inputs" :key="input.id" class="input-item">
        <div class="input-wrapper">
          <el-input
            v-model="input.value"
            :placeholder="`请输入内容 #${index + 1}`"
            clearable
            size="large"
          />
        </div>
        <el-button
          type="danger"
          :icon="Delete"
          circle
          @click="removeInput(index)"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElButton, ElInput, ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Delete, View } from '@element-plus/icons-vue'

// 响应式数据
const inputs = ref([])
let nextId = 1

// 计算属性
const inputCount = computed(() => inputs.value.length)

// 添加输入框的函数
const addInput = () => {
  inputs.value.push({
    id: nextId++,
    value: ''
  })
}

// 删除指定索引的输入框
const removeInput = (index) => {
  inputs.value.splice(index, 1)
}

// 清空所有输入框
const clearAllInputs = () => {
  if (inputs.value.length === 0) {
    ElMessage.info('没有可清空的输入框')
    return
  }
  
  ElMessageBox.confirm(
    '确定要清空所有输入框吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    inputs.value = []
    ElMessage.success('已清空所有输入框')
  }).catch(() => {
    // 用户取消操作
  })
}

// 显示所有输入框的值
const showAllValues = () => {
  if (inputs.value.length === 0) {
    ElMessage.info('暂无输入框')
    return
  }
  
  const values = inputs.value.map((input, index) => {
    return `输入框 #${index + 1}: ${input.value || '空'}`
  }).join('\n')
  
  ElMessageBox.alert(values, '所有输入框的值', {
    confirmButtonText: '确定',
    customClass: 'values-message-box'
  })
}

// 组件挂载后初始化一个输入框
onMounted(() => {
  addInput()
})
</script>

<style scoped>
.dynamic-inputs-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.title {
  text-align: center;
  margin-bottom: 24px;
  color: #303133;
  font-weight: 500;
}

.input-count {
  margin-bottom: 20px;
  color: #606266;
  font-size: 14px;
  text-align: center;
}

.action-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 30px;
  justify-content: center;
  flex-wrap: wrap;
}

.empty-state {
  margin: 40px 0;
}

.inputs-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.input-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background-color: #f8f9fa;
  transition: all 0.3s ease;
}

.input-item:hover {
  background-color: #f0f2f5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.input-wrapper {
  flex: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dynamic-inputs-container {
    padding: 16px;
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .action-buttons .el-button {
    width: 100%;
    max-width: 300px;
  }
  
  .input-item {
    flex-direction: column;
    align-items: stretch;
  }
  
  .input-item .el-button {
    align-self: flex-end;
    margin-top: 8px;
  }
}

/* 全局样式，不在scoped范围内 */
:global(.values-message-box) {
  max-width: 90vw;
  width: 500px !important;
}

:global(.values-message-box .el-message-box__content) {
  white-space: pre-line;
}
</style>